<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增文章')" />
	<script th:src="@{/js/My97DatePicker/WdatePicker.js}" ></script>
	<th:block th:include="include :: select2-css" />
	<th:block th:include="include :: summernote-css" />
	<link href="../static/css/tanchuang.css" th:href="@{/css/tanchuang.css}" rel="stylesheet"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">

	<form class="form-horizontal m" id="form-article-add">
		<input name="folderId" type="hidden" id="treeId"/>
		<div class="form-group">
			<label class="col-sm-3 control-label"><span style="color: red; ">*</span>父栏目：</label>
			<div class="col-sm-5">
				<div class="input-group">
					<input class="form-control"  type="text" onclick="selectFolderTree()" id="treeName" readonly="true" >
					<span class="input-group-addon"><i class="fa fa-search"></i></span>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label">文章名称：</label>
			<div class="col-sm-5">
				<input id="title" name="title" class="form-control" type="text">
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label">副标题：</label>
			<div class="col-sm-3">
				<input id="subtitle" name="subtitle" class="form-control" type="text">
			</div>
			<label class="col-sm-3 control-label">发布时间：</label>
			<div class="col-sm-3">
				<input id="publishTime" name="publishTime" class="form-control" type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM'})">
			</div>
		</div>

		<div class="form-group">

			<label class="col-sm-3 control-label">状态：</label>
			<div class="col-sm-3">
				<label class="radio-inline">
					<input type="radio" name="status"  value="2" > 隐藏
				</label>
				<label class="radio-inline">
					<input type="radio" name="status"  value="1" > 显示
				</label>
			</div>
		</div>
		<div class="form-group">

			<label class="col-sm-3 control-label">是否登录权限：</label>
			<div class="col-sm-3">
				<label class="radio-inline">
					<input type="radio" id="isComment" name="isComment"  value="1"> 是
				</label>
				<label class="radio-inline">
					<input type="radio"  name="isComment"  value="2"> 否
				</label>
			</div>

			<label class="col-sm-3 control-label">是否推荐：</label>
			<div class="col-sm-3">
				<label class="radio-inline">
					<input type="radio" id="isRecommend" name="isRecommend"   value="1"> 是
				</label>
				<label class="radio-inline">
					<input type="radio" name="isRecommend"   value="2"> 否
				</label>
			</div>
		</div>


		<div class="form-group">
			<label class="col-sm-3 control-label">发布者：</label>
			<div class="col-sm-3">
				<input id="publishUser" name="publishUser" class="form-control" type="text">
			</div>
			<label class="col-sm-3 control-label">类型：</label>
			<div class="col-sm-3">
				<select name="type" class="form-control" >
					<option value="1">正常</option>
					<option value="2">预览</option>
					<option value="3">程序</option>
				</select>
			</div>
		</div>
		<!--<div class="form-group">-->
			<!--<label class="col-sm-3 control-label">开始时间：</label>-->
			<!--<div class="col-sm-4">-->
				<!--<input id="startTime" name="startTime" class="form-control Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})">-->
			<!--</div>-->
		<!--</div>-->
		<!--<div class="form-group">-->
			<!--<label class="col-sm-3 control-label">类型：</label>-->
			<!--<div class="col-sm-3">-->
				<!--<select name="type" class="form-control" >-->
					<!--<option value="1">正常</option>-->
					<!--<option value="2">预览</option>-->
					<!--<option value="3">程序</option>-->
				<!--</select>-->
			<!--</div>-->
		<!--</div>-->
		<div class="form-group">
			<label class="col-sm-3 control-label">文章内容：</label>
			<div class="col-sm-9">
				<input id="content" name="content" type="hidden">
				<div class="summernote"></div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label">跳转地址：</label>
			<div class="col-sm-3">
				<input id="jumpUrl" name="jumpUrl" class="form-control" type="text">
			</div>
			<label class="col-sm-3 control-label">图片路径：</label>
			<div class="col-sm-3">
				<!--<input id="imageUrl" name="imageUrl" class="form-control" type="text">-->
				<!--<input type="file" accept="image/*" class="form-control" name="imageUrl" />-->
				<input type="file" accept="image/*" onchange="uploadFile()" id="fileUpload" multiple="multiple" />
			</div>
		</div>
		<!--<div class="form-group">-->
		<!--<label class="col-sm-3 control-label">图片路径：</label>-->
		<!--<div class="col-sm-3">-->
			<!--&lt;!&ndash;<input id="imageUrl" name="imageUrl" class="form-control" type="text">&ndash;&gt;-->
			<!--<input type="file" accept="image/*" class="form-control" name="imageUrl" />-->
		<!--</div>-->
	<!--</div>-->
		<!--<div class="form-group">-->
		<!--<label class="col-sm-3 control-label">网络图片路径：</label>-->
		<!--<div class="col-sm-8">-->
		<!--<input id="imageNetUrl" name="imageNetUrl" class="form-control" type="text">-->
		<!--</div>-->
		<!--</div>-->

	</form>
</div>
    <div th:include="include::footer"></div>
	<th:block th:include="include :: summernote-js" />
    <script type="text/javascript">
        var fileServ='http://211.149.205.33:18080';
		var prefix = ctx + "question/article";
        var preFile = "http://211.149.205.33:18080/file/";
		$("#form-article-add").validate({
			rules:{
                treeName:{
					required:true,
				},
			},
			focusCleanup: true
		});
		$(function () {
            //文章内容
            $('.summernote').summernote({
                //placeholder: '请输入公告内容',

                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'clear']],
                    ['fontsize', ['fontsize']],
                    ['fontname', ['fontname']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture']],
                    ['view', ['fullscreen', 'codeview', 'help']],

                ],
                height : 192,
                lang : 'zh-CN',
                callbacks: {
                    onImageUpload: function (files) {
                        sendFile(files[0], this);
                    }
                }
            });

        });

        // 上传文件
        function sendFile(file, obj) {

            var formData = new FormData();
            formData.append("files", file);

            $.ajax({
                url: fileServ+"/file/mulitiupload",
                type: "POST",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function(resp){
                    if(null!=resp && resp.length>0){
                        var tempurl="http://211.149.205.33:18080/file/down/"+resp[0].fileid;
                        var tempname=resp[0].name;
                        $(obj).summernote('editor.insertImage', tempurl, tempname);
                    }
                },
                error: function(error) {
                    $.modal.alertWarning("图片上传失败。");
                }
            });
        }

        function initview() {
            $(".sn-checkbox-open-in-new-window").hide();
            $(".link-dialog .modal-title").html("插入附件");
            $(".link-dialog .modal-body").empty();
            $(".link-dialog .modal-body").append('<div class="form-group note-form-group"><label class="note-form-label">本地上传</label><form id="uploadForm" enctype="multipart/form-data" method="post"><input name="files" class="file upload-file-input" type="file" size="20" multiple="multiple" /></form> </div>');
            $(".link-dialog .modal-footer").empty();
            $(".link-dialog .modal-footer").append('<button type="button" class="btn btn-primary" id="saveBtn" disabled>插入附件</button>');
            $(".note-group-image-url").hide();
        }
        initview();

        $(".upload-file-input").change(function () {
            var file = $(".upload-file-input").get(0).files[0];
            if (null!=file){
                $("#saveBtn").removeAttr("disabled");;
            }
        });

        $("#saveBtn").click(function () {
            var formData = new FormData($("#uploadForm")[0]);
            $.ajax({
                url: fileServ+"/file/mulitiupload",
                type: "POST",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function(resp){
                    if(null!=resp && resp.length>0){
                        var tempurl="http://211.149.205.33:18080/file/down/"+resp[0].fileid;
                        $(".note-editable p").append('<a href="'+tempurl+'" target="_blank">'+resp[0].name+'</a>');
                    }
                    console.log(resp);
                    console.log(resp[0].fileid);
                    $(".link-dialog").modal('hide');
                },
                error: function(error) {
                    $.modal.alertWarning("附件上传失败。");
                }
            });
        });

        /*用户管理-新增-选择单位树*/
        function selectFolderTree() {
            var treeId = $("#treeId").val();
            var folderId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
            var url = ctx + "question/folder/selectDeptTree/" + folderId;
            var options = {
                title: '选择单位',
                width: "380",
                url: url,
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }
		function submitHandler() {
	        if ($.validate.form()) {
                var sHTML = $('.summernote').summernote('code');
                $("#content").val(sHTML);
	            $.operate.save(prefix + "/add", $('#form-article-add').serialize(),saveCallback);
	        }
	    }
        function saveCallback(result) {
            var id = result.data;
            addFile(id) //上传
        }
        function doSubmit(index, layero){
            var tree = layero.find("iframe")[0].contentWindow.$._tree;
            if ($.tree.notAllowParents(tree)) {
                var body = layer.getChildFrame('body', index);
                $("#treeId").val(body.find('#treeId').val());
                $("#treeName").val(body.find('#treeName').val());
                layer.close(index);
            }
        }
        var arr =[];  //定义一个数组
        function uploadFile(){		 //
            var file = $("#fileUpload").get(0).files[0];
            if(file != undefined){
                var formData = new FormData();
                formData.append("files", file);
                $.ajax({
                    url:preFile+"mulitiupload",
                    type: "POST",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(resp) {
                        var model=new Object();
                        model.fileId =resp[0].fileid; //文件id
                        model.fileName =resp[0].name;//文件名称
                        var index = model.fileName.lastIndexOf(".");
                        var suffix = model.fileName.substring(index+1);
                        model.fileType =suffix; //文件类型
                        arr.push(model);


                    },
                    error: function(error) {
                        $.modal.alertWarning("附件上传失败。");
                    }
                });
            } else {
                $.modal.alertWarning("服务出现错误 。联系管理员 ");
            }
        };
        function addFile(id){
            $.ajax({
                url:prefix+"/saveFile",
                type: "POST",
                data: {articleId:id,array:JSON.stringify(arr)},
                dataType:"json",
                success: function(resp) {

                }
            });
        }
	</script>
</body>
</html>
